<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title></title>
</head>
<script src="js/serverUrl.js"></script>
<script src="js/vue.js"></script>
<script src="js/mint.js"></script>
<script src="js/moment.js"></script>
<style type="text/css">
        .container{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .dataContainer{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100vw;
        }
        .typeContainer{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 90vw;
            background-color: white;
            height: 12vw;
            border-radius: 2vw;
            margin-top: 2.5vh;
            box-shadow:2px 2px #D3D3D3;
            z-index: 5;
        }
        .typeImg{
            height: 8vw;
            width: 8vw;
            margin-right: 4vw;
        }
        .typeName{
            font-size: 4vw;
        }
        .subContainer{
            display: grid;
            padding-top: 3vw;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            width: 90vw;
            margin-top: -5px;
            background-color: white;
            box-shadow:2px 2px #D3D3D3;
            border-bottom-left-radius: 2vw;
            border-bottom-right-radius: 2vw;
            margin-bottom: 3vw;
        }
        .subType{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 25vw;
        }

        .subtypeImg{
            width: 10vw;
            height: 10vw;
        }
        .subtypeName{
            font-size: 3vw;
            margin-top: 2vh;
        }
        .subTypeChoose{
            background-color: lightgray;
        }
    </style>
<body style="background-color: #f4f4f4;">
<div id="app">
    <div class="container">
        <div class="dataContainer" v-for="item in dataList">
            <div :class="item.active?'typeContainer subTypeChoose':'typeContainer'" @click="toQuestion(item)">
                <img class="typeImg" :src="item.url" />
                <div class="typeName">{{item.name}}</div>
            </div>
            <div class="subContainer" v-if="item.children!=null">
                <div v-for="subItem in item.children"  :class="subItem.active?'subTypeChoose subType':'subType'" @click="toQuestion(subItem)">
                    <img class="subtypeImg" :src="subItem.url" />
                    <div class="subtypeName">{{subItem.name}}</div>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
<script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data:{
              dataList:[
                 {
                     url:'img/anquan.png',
                     name:'安全题库',
                     itemId:11311,
                     children:[
                         {
                             url:'img/reji.png',
                             name:'热机',
                             itemId:11295,
                         },
                         {
                             url:'img/dianqi.png',
                             name:'电气',
                             itemId:11296,
                         },
                         {
                             url:'img/jikong.png',
                             name:'集控',
                             itemId:11297,
                         },
                         {
                             url:'img/gongdian1.png',
                             name:'供电',
                             itemId:11298,
                         },

                         {
                             url:'img/jiaotonganquan.jpg',
                             name:'交通安全',
                             itemId:11381,
                         },
                         {
                             url:'img/xiaofang.png',
                             name:'消防',
                             itemId:11300,
                         },
                         {
                             url:'img/teshugongzhong.png',
                             name:'特殊工种',
                             itemId:11301,
                         },
                         {
                             url:'img/xinanfa.png',
                             name:'新安法',
                             itemId:11302,
                         }
                     ]
                 },
                 {
                     url:'img/jineng.png',
                     name:'技能鉴定',
                     itemId:11303,
                     children:[
                         {
                             url:'img/2_03.png',
                             name:'第一版',
                             itemId:796,
                         },
                         {
                             url:'img/2_05.jpg',
                             name:'第二版',
                             itemId:11614,
                         },
                         ]

                 },
                 {
                     url:'img/qiye.png',
                     name:'企业题库',
                     itemId:11304,
                     children:[
                         {
                             url:'img/jinneng_logo.png',
                             name:'热力公司',
                             itemId:12164,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'阳泉发电',
                             itemId:12168,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'装备公司',
                             itemId:12170,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'房地产公司',
                             itemId:12182,
                         },
                             {
                             url:'img/jinneng_logo.png',
                             name:'地电公司',
                             itemId:12186,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'大同晋银',
                             itemId:12198,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'龙川公司',
                             itemId:12210,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'售电公司',
                             itemId:12215,
                         },




                         {
                             url:'img/jinneng_logo.png',
                             name:'漳泽发电',
                             itemId:10904,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'蒲洲热电',
                             itemId:10952,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'塔山发电',
                             itemId:10934,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'侯马热电',
                             itemId:11000,
                         },



                         {
                             url:'img/jinneng_logo.png',
                             name:'同华发电',
                             itemId:11087,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'临汾热电',
                             itemId:11183,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'国锦煤电',
                             itemId:11232,
                         },
                         {
                             url:'img/jinneng_logo.png',
                             name:'河津发电',
                             itemId:11268,
                         },
                     ]
                 },
                 {
                     url:'img/fadian.png',
                     name:'发电题库',
                     itemId:11305,
                     children:[
                         {
                             url:'img/2_09.jpg',
                             name:'电气',
                             itemId:11579,
                         },
                         {
                             url:'img/2_11.png',
                             name:'机炉',
                             itemId:11581,
                         },
                         {
                             url:'img/2_13.jpg',
                             name:'热控',
                             itemId:11588,
                         },
                         {
                             url:'img/2_15.jpg',
                             name:'化学',
                             itemId:11589,
                         },
                         {
                             url:'img/2_19.jpg',
                             name:'脱硫',
                             itemId:11590,
                         },
                         {
                             url:'img/2_21.png',
                             name:'输煤',
                             itemId:11591,
                         },
                         {
                             url:'img/2_23.jpg',
                             name:'集控',
                             itemId:11601,
                         },
                         ]
                 },
                 {
                     url:'img/xinnengyuan.png',
                     name:'新能源题库',
                     itemId:11306,
                     children:[
                         {
                             url:'img/2_27.png',
                             name:'风机试题',
                             itemId:5364,
                         },
                         {
                             url:'img/2_29.png',
                             name:'燃气轮机试题',
                             itemId:5380,
                         },
                     ]
                 },

                 {
                     url:'img/gongdian.png',
                     name:'供电题库',
                     itemId:11307,
                 },
                 {
                     url:'img/guanli.png',
                     name:'管理题库',
                     itemId:11308,
                 },
                 {
                     url:'img/dangjian.png',
                     name:'党建题库',
                     itemId:11309,
                 },
                 {
                     url:'img/qita.png',
                     name:'其他题库',
                     itemId:11310,
                 },
              ]
           },
			created() {
				window.getBankTypeList = this.getBankTypeList
                window.choosItem = this.choosItem
			},
			methods:{
			  getBankTypeList (bankTypeList){
				 for(var i= 0;i<bankTypeList.length;i++){
					 bankType = bankTypeList[i]
					 for (var j = 0;j<bankType.children.length;j++){
						 bankType.children[j].color = '#000000'
					 }
				 }
				this.bankTypeList = bankTypeList
			  },
			  choosItem() {
                  let params = {
                      tradeMulu:this.chooseItem.itemId
                  }
				    WebViewJavascriptBridge.callHandler('toJznExam',params);
			  },
              toQuestion(item) {
                  let dataList =[]

                  for(let i = 0;i<this.dataList.length;i++){

                      dataList.push(this.dataList[i])
                      dataList[i].active = false
                      if(this.dataList[i].children!=null){
                          for(let j =0;j<this.dataList[i].children.length;j++){
                              dataList[i].children[j].active = false
                          }
                      }
                  }

                  this.dataList = dataList

                  item.active = true
				  this.chooseItem = item
			  }
			}
		})	
	</script>
</html>
